<template>
    <div id="index3" v-loading.fullscreen.lock="loading">
        <!-- 车次查询 -->
        <div v-if="step==0" id="train">
            <div id="station">
                <el-cascader placeholder="出发地" v-model="fromStation" :options="stations" :show-all-levels="false" :filterable="true"></el-cascader>
                <i class="el-icon-refresh" style="padding:12px" @click="changStation()"></i>
                <el-cascader placeholder="目的地" v-model="toStation" :options="stations" :show-all-levels="false" :filterable="true"></el-cascader>
            </div>
            <div id="time">
                <div id="date">
                    <el-date-picker type="date" placeholder="日期" v-model="selectDate" value-format="yyyy-MM-dd" clear-icon="" :editable="false"
                    />
                </div>
                <div id="dateButtons">
                    <el-button type="primary" @click="getTrainList()">查询</el-button>
                </div>
            </div>
            <div id="table">
                <div id="tableItems" class="card" v-for="item in tableData" :key="item.trainNumber" @click="trainInfo(item)">
                    <div id="tableItem1">车次: {{item.trainNumber}}</div>
                    <div id="tableItem2">发时: {{item.fromTime}}</div>
                    <div id="tableItem3">到时: {{item.toTime}}</div>
                </div>
            </div>
        </div>
        <!-- 乘客座位选择 -->
        <div v-else-if="step==1" id="passenger">
            <div id="pasPage">
                <div id="pasUser">
                    <p>乘客</p>
                    <el-radio-group v-model="checkedUser">
                        <el-radio id="pasItem" border v-for="passenger in passengerTable" :key="passenger.passenger_id_no" :label="passenger">
                            {{passenger.passenger_name}}
                        </el-radio>
                    </el-radio-group>
                </div>
                <hr>
                <div id="pasType">
                    <p>座位</p>
                    <el-checkbox-group v-model="checkedTypes">
                        <el-checkbox id="pasItem" border v-if="selectTrain.types[0].valid" label="1">{{selectTrain.types[0].name}}</el-checkbox>
                        <el-checkbox id="pasItem" border v-if="selectTrain.types[1].valid" label="2">{{selectTrain.types[1].name}}</el-checkbox>
                        <el-checkbox id="pasItem" border v-if="selectTrain.types[2].valid" label="O">{{selectTrain.types[2].name}}</el-checkbox>
                        <el-checkbox id="pasItem" border v-if="selectTrain.types[3].valid" label="M">{{selectTrain.types[3].name}}</el-checkbox>
                        <el-checkbox id="pasItem" border v-if="selectTrain.types[4].valid" label="9">{{selectTrain.types[4].name}}</el-checkbox>
                        <el-checkbox id="pasItem" border v-if="selectTrain.types[5].valid" label="3">{{selectTrain.types[5].name}}</el-checkbox>
                        <el-checkbox id="pasItem" border v-if="selectTrain.types[6].valid" label="4">{{selectTrain.types[6].name}}</el-checkbox>
                        <el-checkbox id="pasItem" border v-if="selectTrain.types[7].valid" label="6">{{selectTrain.types[7].name}}</el-checkbox>
                        <el-checkbox id="pasItem" border v-if="selectTrain.types[8].valid" label="A">{{selectTrain.types[8].name}}</el-checkbox>
                        <el-checkbox id="pasItem" border v-if="selectTrain.types[9].valid" label="0">{{selectTrain.types[9].name}}</el-checkbox>
                    </el-checkbox-group>
                </div>
            </div>
            <div id="buttons">
                <div></div>
                <el-button id="buttonOrder" type="primary" @click="selectPage(0)">回退</el-button>
                <el-button id="buttonOrder" type="primary" @click="selectPage(2)">完成</el-button>
                <div></div>
            </div>
        </div>
        <!-- 订单确认 -->
        <div v-else id="complete">
            <div id="comPage">
                <table id="completeTable">
                    <tr>
                        <td id="completeTableItem" style="width:20%">日期: </td>
                        <td id="completeTableItem" style="width:30%">{{selectDate}}</td>
                        <td id="completeTableItem" style="width:20%">车次: </td>
                        <td id="completeTableItem" style="width:30%">{{selectTrain.trainNumber}}</td>
                    </tr>
                    <tr>
                        <td id="completeTableItem" style="width:20%">出发地: </td>
                        <td id="completeTableItem" style="width:30%">{{fromStation[1]}}</td>
                        <td id="completeTableItem" style="width:20%">目的地: </td>
                        <td id="completeTableItem" style="width:30%">{{toStation[1]}}</td>
                    </tr>
                    <tr>
                        <td id="completeTableItem" style="width:20%">发时: </td>
                        <td id="completeTableItem" style="width:30%">{{selectTrain.fromTime}}</td>
                        <td id="completeTableItem" style="width:20%">到时: </td>
                        <td id="completeTableItem" style="width:30%">{{selectTrain.toTime}}</td>
                    </tr>
                </table>
            </div>
            <div id="buttons">
                <div></div>
                <el-button id="buttonOrder" type="primary" @click="selectPage(1)">回退</el-button>
                <el-button id="buttonOrder" type="primary" @click="newOrder()">确认</el-button>
                <div></div>
            </div>
        </div>
        <!-- 步骤条 -->
        <div id="step">
            <el-steps id="stepItem" simple :active="step" finish-status="success">
                <el-step title="车次"></el-step>
                <el-step title="乘客"></el-step>
                <el-step title="确认"></el-step>
            </el-steps>
        </div>
        <!-- 车次对话框 -->
        <el-dialog :title="selectTrain.trainNumber" :visible.sync="showInfo" width="320px" top="20vh">
            <div style="width:100%">
                <div>
                    <div>始发站: {{selectTrain.originating}} 终点站: {{selectTrain.terminus}}</div>
                    <div>发时: {{selectTrain.fromTime}} 到时: {{selectTrain.toTime}}</div>
                    <div>可选: {{selectTrain.typesInfo}}</div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="success" @click="selectPage(1)">下一步</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<style>
    @import '../css/Order.css';

</style>

<script>
    import userInfo from './UserInfo.vue'

    // 对应: 硬座、软座、二等座、一等座、商务座、硬卧、软卧、高级软卧、动卧、无座
    const ticketSymbols = ['1', '2', 'O', 'M', '9', '3', '4', '6', 'A', '0'];

    const ticketTypes = [{
        valid: false,
        name: '硬座'
    }, {
        valid: false,
        name: '软座'
    }, {
        valid: false,
        name: '二等座'
    }, {
        valid: false,
        name: '一等座'
    }, {
        valid: false,
        name: '商务座'
    }, {
        valid: false,
        name: '硬卧'
    }, {
        valid: false,
        name: '软卧'
    }, {
        valid: false,
        name: '高级软卧'
    }, {
        valid: false,
        name: '动卧'
    }, {
        valid: false,
        name: '无座'
    }];

    export default {
        components: {
            userInfo
        },

        created: function () {
            // debugger
            this.selectDate = this.$moment().format('YYYY-MM-DD');
            this.getPassenger();
            this.getStations();
        },

        methods: {
            // 得到车站列表
            getStations: function getStations() {
                this.$axios({
                    method: 'post',
                    url: '/station'
                }).then((response) => {
                    if (response.status === 200) {
                        this.loading = false;
                        this.stations = response.data;
                        return;
                    }
                }).catch((error) => {
                    this.loading = false;
                    this.$message({
                        title: '警告',
                        message: '获取车站信息失败',
                        type: 'warning'
                    });
                    return;
                });
            },

            // 得到乘客列表
            getPassenger: function getPassenger() {
                this.$axios({
                    method: 'post',
                    url: '/passenger'
                }).then((response) => {
                    if (response.status === 200) {
                        this.loading = false;
                        if (response.data.isExist) {
                            this.passengerTable = response.data.normal_passengers;
                        } else {
                            this.$message({
                                title: '12306信息',
                                message: response.data.exMsg,
                                type: 'warning'
                            });
                            this.loading = false;
                            this.$router.push({
                                path: 'manage'
                            });
                        }
                        return;
                    }
                }).catch((error) => {
                    this.loading = false;
                    this.$message({
                        title: '警告',
                        message: '服务器无响应',
                        type: 'warning'
                    });
                    this.$router.push({
                        path: 'login'
                    });
                    return;
                });
            },

            // 查询
            getTrainList: function getTrainList() {
                this.tableData = [];
                this.loading = true;

                this.$axios({
                    method: 'post',
                    url: '/query',
                    data: {
                        fromStationName: this.fromStation[0],
                        toStationName: this.toStation[0],
                        fromStation: this.fromStation[1],
                        toStation: this.toStation[1],
                        train_date: this.selectDate
                    }
                }).then((response) => {
                    if (response.status === 200) {
                        this.tableData = response.data;
                        return true;
                    }
                }).catch((error) => {
                    console.error(error);
                    return false;
                });

                this.loading = false;
            },

            // 交换车站
            changStation: function changStation() {
                const tempStation = this.fromStation;
                this.fromStation = this.toStation;
                this.toStation = tempStation;
            },

            // 车次信息
            trainInfo: function trainInfo(item) {
                this.showInfo = true;
                this.selectTrain = item;
                this.selectTrain.types = ticketTypes;
                this.selectTrain.typesInfo = '';

                this.selectTrain.types[0].valid = (this.selectTrain.seatPYZ.length != 0);
                this.selectTrain.types[1].valid = (this.selectTrain.seatPRZ.length != 0);
                this.selectTrain.types[2].valid = (this.selectTrain.seatDEDZ.length != 0);
                this.selectTrain.types[3].valid = (this.selectTrain.seatDYDZ.length != 0);
                this.selectTrain.types[4].valid = (this.selectTrain.seatDSWZ.length != 0);
                this.selectTrain.types[5].valid = (this.selectTrain.bedPYW.length != 0);
                this.selectTrain.types[6].valid = (this.selectTrain.bedPRW.length != 0);
                this.selectTrain.types[7].valid = (this.selectTrain.bedPGRW.length != 0);
                this.selectTrain.types[8].valid = (this.selectTrain.bedDDW.length != 0);
                this.selectTrain.types[9].valid = (this.selectTrain.seatPYZ.stand != 0);

                for (let index = 0; index < this.selectTrain.types.length; index++) {
                    if (this.selectTrain.types[index].valid) {
                        this.selectTrain.typesInfo += this.ticketTypes[index].name + ' ';
                    }
                }
            },

            // 新建订单
            newOrder: function newOrder() {
                this.loading = true;
                let slecetTypes = ''

                for (const typeIndex in this.checkedTypes) {
                    if (this.checkedTypes.hasOwnProperty(typeIndex)) {
                        slecetTypes += this.checkedTypes[typeIndex];
                    }
                }

                this.$axios({
                    method: 'post',
                    url: '/new',
                    data: {
                        passengerName: this.checkedUser.passenger_name,
                        passengerType: this.checkedUser.passenger_type,
                        passengerId: this.checkedUser.passenger_id_no,
                        passengerIdType: this.checkedUser.passenger_id_type_code,
                        trainNumber: this.selectTrain.trainNumber,
                        fromStation: this.selectTrain.fromStation,
                        toStation: this.selectTrain.toStation,
                        trainDate: this.selectDate,
                        ticketType: slecetTypes,
                        cellPhone: this.checkedUser.mobile_no,
                        status: 'Work'
                    }
                }).then((response) => {
                    if (response.status === 200) {
                        this.loading = false;
                        this.$router.push({
                            path: 'manage'
                        });
                        return;
                    }
                }).catch((error) => {
                    console.error(error);
                    this.loading = false;
                    return;
                });
            },

            // 页面切换
            selectPage: function selectPage(page) {
                this.loading = false;
                this.showInfo = false;
                this.step = page;
            },

            orderCencel: function orderCencel() {
                this.$router.push({
                    path: 'manage'
                });
            }
        },

        data() {
            return {
                userData: userInfo.infoData,

                step: 0,
                loading: false,
                showInfo: false,
                selectTrain: {},
                ticketTypes: ticketTypes,

                selectDate: '',
                fromStation: ['Y', 'YLZ'],
                toStation: ['N', 'NNZ'],
                tableData: [],

                passengerTable: {},

                checkedUser: {},
                checkedTypes: [],

                stations: [],
            }
        }
    };

</script>

